
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;margin: 0px auto;background-color:#fff;z-index:999;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '潜在客户报表',
                subtext: '分组类型:'+'${groupTypeName}',
                left: 'center'
            },


            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'

            },
            legend: {
                show: false,
                orient: 'vertical',
                x: 'left',
                data: '${xList}'
            },
            graphic:{
                type:'text',
                left:'center',
                top:'center',
                style:{
                    text:'统计\n'+'100', //使用“+”可以使每行文字居中
                    textAlign:'center',
                    font:'italic bolder 16px cursive',
                    fill:'#000',
                    width:30,
                    height:30
                }
            },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多

            series: [
                {
                    name: '潜在客户数',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],

                    itemStyle: {
                        normal:{
                            label:{
                                show:true,
                                textStyle:{color:'#3c4858',fontSize:"18"},
                                formatter:function(val){   //让series 中的文字进行换行
                                    return val.name.split("-").join("\n");}
                            },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
                            labelLine:{
                                show:true,
                                lineStyle:{color:'#3c4858'}
                            }//线条颜色
                        },//基本样式
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
                            textColor:'#000'
                        }//鼠标放在各个区域的样式
                    },

                    data: '${yList}',//[{value: 335, name: '孙总'}]
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]


        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>
